<template>
  <t-card :bordered="false">
    <!-- 自定义搜索 -->
    <custom-search ref="customSearchRef" v-slot="{ params }"  @submit="handleInitTable">

      <t-col :span="3">
        <t-form-item label="创建时间" name="createTime">
          <t-date-range-picker
            allow-input
            v-model:value="params.createTime"
            clearable
            enable-time-picker
            placeholder=" "
            style="width: 100%"
          />
        </t-form-item>
      </t-col>
    </custom-search>
    <!-- 自定义表格 -->
    <custom-table
      ref="customTableRef"
      row-key="id"
      :columns="columns"
      :api="GiftProjectListCRUD.page"
      column-controller-key="GiftProjectList"
    >
      <template #topContent>
        <div style="margin-bottom: var(--td-comp-margin-xxl)">
          <t-button
            v-permission="['system:gift-project:create']"
            @click="handleOpenDialog('create', { 
              status: '1',
              fileUrlList: []
              })"
          >
            新建赠品
          </t-button>
        </div>
      </template>
      <template #fileUrl="{ row }">
        <image-viewer v-if="row.fileUrl" :images="[row.fileUrl]" width="80px" height="80px" />
      </template>
   
    
      <template #status="{ row }">
        <t-switch
          v-model:value="row.status"
          :custom-value="['0', '1']"
          :loading="row.loading"
          @change="handleChangeStatus(row)"
        />
      </template>
      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #operation="{ row }">
        <t-space break-line>
          <t-link
            v-permission="['system:gift-project:query']"
            theme="primary"
            @click="handleOpenDialog('read', { id: row.id })"
          >
            详情
          </t-link>
          <t-link
            v-permission="['system:gift-project:update']"
            theme="primary"
            @click="handleOpenDialog('update', { id: row.id })"
          >
            编辑
          </t-link>
          <t-popconfirm content="确认要删除该项吗？" @confirm="handleDelete({ id: row.id })">
            <t-link v-permission="['system:gift-project:delete']" theme="danger"> 删除 </t-link>
          </t-popconfirm>
        </t-space>
      </template>
    </custom-table>
    <!-- 自定义对话框 -->
    <custom-dialog
      ref="customDialogRef"
      v-slot="{ formData, readonly }"
      :api-map="GiftProjectListCRUD"
      header="*赠品"
      :on-before-set-data="handleDialogSetData"
      @request-success="handleDialogRequestSuccess"
    >
      <t-form-item label="赠品名称" name="name" :rules="[{ required: true, message: '请选择赠品名称' }]">
        <t-input v-model:value="formData.name" placeholder="请输入赠品名称" clearable :readonly="readonly" />
      </t-form-item>
      <t-form-item label="赠品图片" name="fileUrl" :rules="[{ required: true, message: '请上传赠品图片' }]">
        <upload 
          v-model:files="formData.fileUrlList" 
          accept="image/*" 
          theme="image" 
          :disabled="readonly"
          @change="
              (value) => {
                formData.fileUrl = value[0]?.url;
              }
            "
          />
      </t-form-item>
      <t-form-item label="赠品价值金额" name="money" :rules="[{ required: true, message: '请输入赠品价值金额' }]">
        <t-input-number 
          v-model:value="formData.money"   
          :decimal-places="0"
          min="0"
          :allow-input-over-limit="false" 
          placeholder="请输入赠品价值金额" 
          clearable 
          :readonly="readonly"
          style="width: 100%" />
      </t-form-item>
      <t-form-item label="备注" name="remark" :rules="[{ required: true, message: '请输入备注' }]">
        <t-textarea v-model:value="formData.remark" placeholder="请输入备注" clearable :readonly="readonly" />
      </t-form-item>
      
      <t-form-item label="是否启用" name="status" :rules="[{ required: true, message: '请选择是否启用' }]">
        <t-switch v-model:value="formData.status" :custom-value="['0', '1']" :disabled="readonly" />
      </t-form-item>


    </custom-dialog>
  </t-card>
</template>

<script lang="ts">
export default {
  name: 'GiftProjectList',
};
</script>

<script setup lang="ts">
import dayjs from 'dayjs';
import { MessagePlugin, TableCol } from 'tdesign-vue-next';
import { onMounted, onUpdated, useTemplateRef } from 'vue';

import { GiftProjectListCRUD } from '@/api/budget/gift-project';
import CustomDialog from '@/components/custom/dialog/index.vue';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import ImageViewer from '@/components/image-viewer/index.vue';
import Upload from '@/components/upload/index.vue';
import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();
// 自定义搜索ref
const customSearchRef = useTemplateRef('customSearchRef');
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'name', title: '赠品名称', width: 100 },
  { colKey: 'fileUrl', title: '赠品图片', width: 300 },
  { colKey: 'money', title: '赠品价值金额', width: 250 },
  { colKey: 'remark', title: '备注' },
  { colKey: 'status', title: '是否启用', width: 100 },
  { colKey: 'createTime', title: '创建时间', width: 180 },
  { colKey: 'operation', title: '操作', width: 160, fixed: 'right' },
];
// 处理初始化表格
const handleInitTable = () => {
  const params = { ...customSearchRef.value.params };
  customTableRef.value.initTable(params);
};
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
onMounted(() => {
  handleInitTable();
});
onUpdated(() => {
  handleRefreshTable();
})
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框设置数据
const handleDialogSetData = (params: Record<string, any>) => {
  params.adCode = [];
  if (params.province) params.adCode.push(params.province);
  if (params.city) params.adCode.push(params.city);
  if (params.area) params.adCode.push(params.area);
  // 赠品图片
  params.fileUrlList = [];
  if (params.fileUrl) params.fileUrlList.push({ url: params.fileUrl });
  
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  if (result.mode === 'create') handleInitTable();
  if (result.mode === 'update') handleRefreshTable();
};
// 处理删除
const handleDelete = (params: Record<string, any>) => {
  GiftProjectListCRUD
    .delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};


// 处理改变默认配置
const handleChangeStatus = (row: Record<string, any>) => {
  row.loading = true;
  const params = { ...row };
  GiftProjectListCRUD
    .update(params)
    .then(() => {
      MessagePlugin.success('编辑成功');
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
    .finally(() => {
      row.loading = false;
      handleRefreshTable();
    });
};
</script>

<style lang="less" scoped></style>
